<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历操作</title>
</head>
<body>
    <input type="button" id="btn" value="遍历列表项"/>
    <ul>
        <li>1223</li>
        <li>2334</li>
        <li>3435</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一：传统方式
    /*$("#btn").click(function () {
        let lis = $("li");
        for (let i = 0; i < lis.length; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });*/

    //对象.each()方法
    /*$("#btn").click(function () {
        let lis = $("li");
        lis.each(function (index,ele) {
            alert(index + ":" + ele.innerHTML);
        })
    });*/

    //方式三：$.each()方法
    /*$("#btn").click(function () {
        let lis = $("li");
        $.each(lis,function (index,ele) {
            alert(index + ":" + ele.innerHTML);
        })
    });*/

    //方式四：for of语句
    $("#btn").click(function () {
        let lis = $("li");
        for (ele of lis) {
            alert(ele.innerHTML);
        }
    });
</script>
</html>